<html>
    <head>

    </head>
    <body>
        <!-- 1. 在标签中添加事件处理 -->
        <button id="btn1" onclick="foo1()">按钮一</button>
        <button id="btn2">按钮二</button>
        <button id="btn3">按钮三</button>
        <div id="div01" onclick="alert('div01被点击了')">div01</div>
        <script>
            function foo1(){
                alert("按钮一被点击了");
            }

            function foo2(){
                alert("按钮二被点击了1");
            }

            function foo2b(){
                alert("按钮二被点击了2");
            }

            function foo3(){
                alert("按钮三被点击了1");
            }

            function foo3b(){
                alert("按钮三被点击了2");
            }

            btn2.onclick=foo2;
            btn2.onclick=foo2b;//赋了两次值,后面会覆盖掉前面的那个
            //btn2.onclick=null;//取消点击事件处理

            //2.在脚本中给元素添加事件
            //根据id找到按钮2
            //var btn2=document.getElementById("btn2");//在新版本的浏览器中可以省略

            btn3.addEventListener("click",foo3);
            btn3.addEventListener("click",foo3b);//两个监听事件都会执行
            btn3.removeEventListener("click",foo3);
        </script>
    </body>
</html>